<template>
  <div class="app-container">
    <el-row :gutter="10" class="row-bg">
      <el-col :span="8">
        <div class="box">
          <el-card>
            <div slot="header" class="clearfix">
              <b>Dashboard / 总览</b>
            </div>
            <table style="display: block; height: 230px">
              <tr>
                <td class="table_td">反冲洗水液位</td>
                <td class="table_td2">{{ findVal(314).value | tofix(3) }}</td>
                <td class="table_td3">m</td>
                <td class="table_td">滤池浊度</td>
                <td class="table_td2">{{ findVal(301).value | tofix(3) }}</td>
                <td class="table_td3">NTU</td>
              </tr>
              <tr>
                <td class="table_td">滤池余氯</td>
                <td class="table_td2">{{ findVal(302).value | tofix(3) }}</td>
                <td class="table_td3">mg/L</td>
                <td class="table_td">滤后液位</td>
                <td class="table_td2">{{ findVal(315).value | tofix(3) }}</td>
                <td class="table_td3">m</td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box">
          <el-card>
            <div slot="header" class="clearfix">
              <b>Engine Status / 电机状态</b>
            </div>
            <el-table :data="tableData1" style="width: 100%" height="230">
              <el-table-column prop="pump" label="电机" width="160" />
              <el-table-column prop="status" label="运行状态" />
              <el-table-column prop="frequency" label="频率" />
              <el-table-column prop="time" label="运行时间" />
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <el-card class="row-bg">
          <div slot="header" class="clearfix">
            <b>Level / 水位</b>
          </div>
          <table style="display: block; height: 230px">
            <tr>
              <td class="table_td">1#滤池水位</td>
              <td class="table_td2">{{ findVal(355).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
              <td class="table_td">2#滤池水位</td>
              <td class="table_td2">{{ findVal(373).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
            </tr>
            <tr>
              <td class="table_td">3#滤池水位</td>
              <td class="table_td2">{{ findVal(391).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
              <td class="table_td">4#滤池水位</td>
              <td class="table_td2">{{ findVal(409).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
            </tr>
            <tr>
              <td class="table_td">5#滤池水位</td>
              <td class="table_td2">{{ findVal(427).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
              <td class="table_td">6#滤池水位</td>
              <td class="table_td2">{{ findVal(445).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
            </tr>
            <tr>
              <td class="table_td">7#滤池水位</td>
              <td class="table_td2">{{ findVal(463).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
              <td class="table_td">8#滤池水位</td>
              <td class="table_td2">{{ findVal(481).value | tofix(3) }}</td>
              <td class="table_td3">m</td>
            </tr>
          </table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card>
          <div style="position: relative; height: 7rem">
            <div slot="header" class="clearfix">
              <b>Real Status / 实时状态</b>
            </div>
            <img :src="url" class="image img1" />
            <div v-for="(item, i) in imgArr" :key="i">
              <img :src="(item)" class="image img2" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <div>
          <el-card>
            <div slot="header" class="clearfix">
              <b>Filtration Time / 滤后时间</b>
            </div>
            <table style="display: block; height: 545px">
              <tr>
                <td class="table_td">1#出水阀开度</td>
                <td class="table_td2">{{ findVal(356).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">1#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(367).value | tofix(0) }} ：{{
                    findVal(368).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">2#出水阀开度</td>
                <td class="table_td2">{{ findVal(374).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">2#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(385).value | tofix(0) }} ：{{
                    findVal(386).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">3#出水阀开度</td>
                <td class="table_td2">{{ findVal(392).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">3#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(403).value | tofix(0) }} ：{{
                    findVal(404).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">3#出水阀开度</td>
                <td class="table_td2">{{ findVal(392).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">3#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(403).value | tofix(0) }} ：{{
                    findVal(404).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">4#出水阀开度</td>
                <td class="table_td2">{{ findVal(410).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">4#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(421).value | tofix(0) }} ：{{
                    findVal(422).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">5#出水阀开度</td>
                <td class="table_td2">{{ findVal(428).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">5#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(439).value | tofix(0) }} ：{{
                    findVal(440).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">6#出水阀开度</td>
                <td class="table_td2">{{ findVal(446).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">6#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(457).value | tofix(0) }} ：{{
                    findVal(458).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">7#出水阀开度</td>
                <td class="table_td2">{{ findVal(464).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">7#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(475).value | tofix(0) }} ：{{
                    findVal(476).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
              <tr>
                <td class="table_td">8#出水阀开度</td>
                <td class="table_td2">{{ findVal(482).value | tofix(1) }}</td>
                <td class="table_td3">%</td>
                <td class="table_td">8#过滤时间</td>
                <td class="table_td2">
                  {{ findVal(493).value | tofix(0) }} ：{{
                    findVal(494).value | tofix(0)
                  }}
                </td>
                <td class="table_td3"></td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import "@/assets/resources/comon0.css";
import { findByPage } from "@/api/dispatch/runningState";
import { binary } from "@/utils/common";

// 设置rem
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName("html")[0];
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  htmlDom.style.fontSize = `${htmlWidth / 20}px`;
};

export default {
  name: "Filter",
  components: {},
  data() {
    return {
      timer: null,
      setHtmlFontSize: setHtmlFontSize,
      url: require("@/assets/img/翔安图片/滤池/滤池.png"),
      data: [],
      imgArr: [],
      tableData1: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
      tableData2: [
        {
          pump: "#1",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#2",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#3",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#4",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#5",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#6",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
      ],
    };
  },
  created() {
    window.onresize = this.setHtmlFontSize;
    this.setHtmlFontSize(); // 设置rem
    // this.$nextTick(() => {
    //   this.getData()
    // })
  },
  mounted() {
    this.getData();
    this.timer = setInterval(this.getData, 1000 * 30);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.getElementsByTagName("html")[0].style.fontSize = ""; // 重置rem
  },
  methods: {
    getData() {
      findByPage(7).then((response) => {
        this.data = response.data;
        const imgArr = [];
        response.data.forEach((dev) => {
          let num = binary(dev.info, 32);
          const info = num.split("").reverse();
          // 电机
          switch (true) {
            case dev?.type === 2 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/滤池/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/滤池/${dev.id}-15.png`);
                imgArr.push(img);
              }
            case dev?.type === 3 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/滤池/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[2] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/滤池/${dev.id}-2.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/滤池/${dev.id}-15.png`);
                imgArr.push(img);
              }
          }
        });
        this.imgArr = imgArr;
        this.handleTable1();
        console.log(imgArr);
      });
    },
    handleTable1(data) {
      for (let i = 0, j = 345; i < 353 - 345 + 1; i++, j++) {
        this.tableData1[i].pump = this.findVal(j).reMark;
        this.tableData1[i].time = this.findVal(j).rt + "";
        this.tableData1[i].status = this.handleStatus(j);
      }
    },
    handleStatus(id) {
      let num = binary(this.findVal(id).info, 32);
      const info = num.split("").reverse();
      if (info[1] === "1" && info[15] !== "1") {
        return "运行";
      } else if (info[15] === "1") {
        return "故障";
      } else return "停止";
    },
    findVal(id) {
      const arr = this.data.filter((item) => item?.id == id);
      if (arr.length === 0) {
        return [
          {
            id: 0,
            info: 0,
            leiji: 0,
            ord: 0,
            page: 0,
            remark: "",
            rt: 0,
            rtm: 0,
            spm: 0,
            type: 0,
            value: 0,
          },
        ];
      }
      return arr[0];
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  font-size: 0.15rem;
}
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
}

.table_td {
  width: 110px;
  height: 30px;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.table_td2 {
  width: 100px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.table_td3 {
  width: 20px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.box {
  height: 300px;
}

.row-bg {
  margin-bottom: 10px;
}

.col_border {
  text-align: center;
  position: relative;
  z-index: 100;
}

.col_border:before {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.col {
  text-align: center;
  position: relative;
  z-index: 100;
}

.tip {
  text-align: center;
  color: gray;
  font-size: 16px;
  margin-bottom: 10px;
}
.content {
  text-align: center;
  font-size: 12px;
}

.img1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.img2 {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}
</style>
